<template>
  <div class="pxpage">
    <div class="logo">
      <img src="@/assets/logo.png" alt="" />
      <div class="txt">
        <span></span> <br />
        培训中心
      </div>
    </div>
    <h1>{{ title }}</h1>
    <!-- <h1>{{examType == 1 ?"考试须知":"培训须知"}}</h1> -->
    <button class="go-back" @click="goBack">返回</button>
    <div class="btn-taggle">
      <button>
        {{ title }}
      </button>
      <!-- <button v-bind:class="{ active: isable }" @click="isable = false">
        设备接线图
      </button> -->
    </div>

    <div class="pxxz" v-if="status == 1">
      <p>
        1.请按照教室入口处屏幕提示前往指定的机位，并在机位前通过摄像机再次进行身份认证。
      </p>
      <p>
        2.
        生通过身份证验证后方可到场参加上机考试，请考生再次确认已通过身份证审核流程，未经身份证验证将无法答题。
      </p>
      <p>
        3.
        考严禁携带考试相关资料和手机等通讯设备。考生必须关闭手机、电子字典及其他通讯电子设备电源后将其与其它物品一并放于指定的地点。手机必须关闭电源，考试过程中，掏出手机或者手机响，视同作弊。一经发现将直接取消考试资格。
      </p>
      <p>
        4. 考试自己如遇突发状况，请通过屏幕“呼叫老师”按钮，严禁私自离开考位。
      </p>
      <p>
        5.
        考试过程中严禁中途离开上机区域，严禁人员聚集、严禁做与上机无关的动作。
      </p>
      <p>
        6.
        系统会根据你的操作进行计时，点击屏幕“开始考试”按钮后，考试开始计时，点击屏幕“结束考试”按钮后，系统停止计时；在点击考试结束按钮，再次点击屏幕“开始拍照”屏幕将切换到摄像机画面，点击拍照按钮后，考试流程完毕
      </p>
      <p>7. 考试过程全程录像，请注意您的言行。</p>
    </div>
    <div class="pxxz-img" v-if="status == 3">
      <viewer :images="imgs" v-for="(src, index) in imgs" :key="index">
        <img :src="src.url" :title="src.title" />
        <h2>{{ src.title }}</h2>
      </viewer>
    </div>

    <div class="video pxxz-img" v-if="status == 2">
      <div class="video">
        <video controls>
          <source src="staic/2.mp4" type="video/mp4" />
        </video>
        <h2>越界提示</h2>
      </div>
      <div class="video">
        <video controls>
          <source src="staic/1.mp4" type="video/mp4" />
        </video>
        <h2>人脸识别</h2>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: { examType: Number },
  name: "Xzhi",
  data() {
    return {
      title: "上机须知",
      imgs: [
        {
          url: "staic/01.png",
          title: "三相三线单元",
        },
        {
          url: "staic/02.png",
          title: "三相四线单元",
        },
      ],
      status: 1,
    };
  },
  watch: {
    status(newVal) {
      this.title =
        newVal == 1 ? "上机须知" : newVal == 2 ? "示意动画" : "培训课件";
    },
  },
  mounted() {
    document.querySelector("body").style.backgroundColor = "#f3ffff";
    // this.examType == 1 ? (this.imgs = []):''
    this.status = this.$route.query.status;
  },
  methods: {
    goBack() {
      // this.$emit("back", true,this.examType);
      // this.$store.state.studentName ?  this.$router.push("/train"):this.$router.push("/")
      this.$router.go(-1);
    },
  },
};
</script>
<style scoped>
.btn-taggle {
  text-align: left;
  padding-left: 20px;
  margin-top: 0.45rem;
  padding-bottom: 15px;
  border-bottom: 2px solid #008080;
}
button {
  font-size: 0.2rem;
  margin-right: 0.2rem;
  background: #008080;
  border-radius: 10px;
  border: none;
  padding: 10px 15px;
  color: white;
  border: 1px solid #008080;
  font-weight: bold;
}
.active {
  background: none;
  border: 1px solid #008080;
  color: #008080;
}
.go-back {
  position: absolute;
  top: 100px;
  right: 45px;
  padding: 10px 50px;
}
.pxpage .logo {
  position: absolute;
  left: 0.26rem;
  top: 0.22rem;
}
.logo img {
  width: 0.45rem;
}
.logo .txt {
  position: absolute;
  left: 0.4rem;
  width: 1.5rem;
  top: 0.065rem;
  font-size: 0.12rem;
  font-weight: bold;
  line-height: 1.6em;
}
.logo .txt span {
  font-size: 0.14rem;
  letter-spacing: 0.1rem;
}
.pxpage > h1 {
  font-size: 0.3rem;
}
.pxxz {
  margin-top: 25px;
}
.pxxz p {
  text-align: left;
  margin: 15px 20px;
  font-size: 0.19rem;
  font-weight: bold;
}
.pxxz-img {
  display: flex;
  margin-top: 25px;
  flex-wrap: wrap;
  justify-content: flex-start;
}
.pxxz-img > div {
  width: 25%;
  margin-bottom: 25px;
  margin-top: 10px;
}
.pxxz-img > div video {
  width: 80%;
  height: 83.8%;
  object-fit: fill;
}
.pxxz-img > div img {
  width: 70%;
}
.pxxz-img > div h2 {
  font-size: 28px;
}
</style>
